<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<div th:fragment="header">

    <script src="/js/api.js"></script>
    <script src="/js/layuiUtil.js"></script>
    <script>
        // var apiBase = "http://172.15.120.249:8000";
        apiBase = "http://127.0.0.1:8000";

        // base = "http://172.16.18.63:8080";
        base = "http://127.0.0.1:8080";
    </script>
    <style>
        body{
            min-width: 1000px;
        }
        .nav_list {
            background-color: white;
            position: absolute;
            width: 94px;
            right: -46px;
            top: 100px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            box-shadow: darkgrey 10px 10px 30px 5px;
            /*display: none;*/
        }

        .nav_list div {
            /*position: relative;*/
            display: block;
            text-align: center;
            height: 30px;
            font-size: 15px;
            margin: 20px 0;
            line-height: 20px;
            height: 20px;
            color: #333;
        }

        .nav_list div:hover {
            cursor: pointer;
            color: #23b8ff;;
        }

        .triangle {
            position: absolute;
            right: -7px;
            top: 45px;
            width: 0;
            height: 0;
            border-width: 0 15px 15px;
            border-style: solid;
            border-color: transparent transparent #eaeaea;
            margin: 40px auto;
            display: none;
        }
    </style>
    <script>
        function search(e) {
            var evt = window.event || e;
            if (evt.keyCode == 13){
                //回车事件
                window.location.href='/teacher/search.html?key='+e.value;
            }
        }
    </script>

    <div class="header">
        <div class="header-wrap">
            <h1 class="logo pull-left">
                <a href="/teacher/index.html">
                    <img src="/images/logo.png" alt="" class="logo-img">
                    <span style="font-size: 30px; color: white">微课</span>
                    <!--<img src="/images/logo-text.png" alt="" class="logo-text">-->
                </a>
            </h1>
            <form class="layui-form blog-seach pull-left" action="/teacher/search.html">
                <div class="layui-form-item blog-sewrap">
                    <div class="layui-input-block blog-sebox">
                        <i class="layui-icon layui-icon-search"></i>
                        <input type="text" name="key" lay-verify="title" autocomplete="off"
                               class="layui-input" onkeydown="search(event)">
                    </div>
                </div>
            </form>
            <div class="blog-nav pull-right" style="position: relative;">
                <ul class="layui-nav pull-left">
                    <!--<li class="layui-nav-item " th:classappend="${navi=='index'?'layui-this':''}">-->
                    <!--<a href="/teacher/index.html">首页</a>-->
                    <!--</li>-->
                    <li class="layui-nav-item" th:classappend="${navi=='video'?'layui-this':''}">
                        <a href="/teacher/video/index.html">视频</a>
                    </li>
                    <!--<li class="layui-nav-item" th:classappend="${navi=='answer'?'layui-this':''}">-->
                        <!--<a href="/teacher/answer/index.html">问答</a>-->
                    <!--</li>-->
                    <li class="layui-nav-item" th:classappend="${navi=='add'?'layui-this':''}"><a
                            href="/teacher/article/add.html">发布文章</a></li>
                    <li class="layui-nav-item" th:classappend="${navi=='articleManage'?'layui-this':''}">
                        <a href="/teacher/article/articleManage.html">文章管理</a>
                    </li>
                    <li class="layui-nav-item" th:classappend="${navi=='outline'?'layui-this':''}">
                        <a href="/teacher/outline/index.html">大纲</a>
                    </li>
                </ul>
                <a href="#" id="user_head" class="personal pull-left" style="margin-left: 10px;">
                    <i class="layui-icon layui-icon-username"></i>
                </a>
                <div class="nav_list" style="display: none;">
                    <!--<div>我的专题</div>-->
                    <div>
                        <a href="/teacher/userInfo/index.html">个人信息</a>
                    </div>
                    <div><a href="/teacher/collect/index.html">收藏</a></div>
                    <div>
                        <a href="/logout">退出</a></div>
                </div>
                <!--<div class="triangle"></div>-->
            </div>
            <div class="mobile-nav pull-right" id="mobile-nav">
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more"></i>
                </a>
            </div>
        </div>
        <ul class="pop-nav" id="pop_nav">
            <li><a href="index.html">首页</a></li>
            <!--<li><a href="index.html">问答</a></li>-->
            <li><a href="message.html">发布文章</a></li>
            <li><a href="about.html">文章管理</a></li>
        </ul>
    </div>

    <script>
        // $('.nav_list').hide();
        // $('#user_head').hover(function () {
        //     $('.nav_list').show();
        // });
        // $('.nav_list').hover(function () {
        //     $(this).show();
        // }, function () {
        //     $(this).hide('slow');
        // })

        //下拉菜单
        var img = $('#user_head');
        var menu = $('.nav_list');
        var i=0;
        var timer;
        img.mouseenter(function () {
            clearTimeout(timer)
            menu.show()
        })
        img.mouseleave(function () {
            timer = window.setTimeout(function () {
                menu.hide()
            },500)
        })
        menu.mouseenter(function () {
            clearTimeout(timer)
            // menu.css('visibility','vidible')
        })
        menu.mouseleave(function () {
            menu.hide()
        })
    </script>
</div>

<div th:fragment="footer">
    <div class="footer">
        <p>
            <span>&copy; 2019</span>
            <span><a href="http://www.layui.com" target="_blank">getword.cn</a></span>
            <span>MIT license</span>
        </p>
        <p><span>人生就是一场修行</span></p>
    </div>
</div>

<div th:fragment="page">
    <div class="column col-md-8">
        <div class="dataTables_info" id="sampleTable_info" role="status" aria-live="polite">
            <!--第<span th:text=""></span>页  &nbsp;&nbsp;-->
            <!--总条数:<span th:text=""></span>-->
        </div>
    </div>
    <div class="column col-md-4">
        <ul class="pagination">
            <li class="page-item">
                <div class="item-btn">
                    <button class="layui-btn layui-btn-normal">上一页</button>
                </div>
            </li>
            <li class="page-item"></li>
            <li class="page-item">
                <div class="item-btn">
                    <button class="layui-btn layui-btn-normal">下一页</button>
                </div>
            </li>
        </ul>
    </div>


</div>
</html>